<template>
  <div class="login-container" >
      <van-nav-bar
  title="登录"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>
<van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    name="mobile"
    label="手机号"
    type="tel"
    placeholder="请输入手机号"
    :rules="[
    { required: true, message: '请填写用户名' },
       {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式不对'
          }
    ]"
  />
  <van-field
    v-model="code"
    name="code"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[
    { required: true, message: '请填写密码' },
    {
        pattern:/^\d{6}$/,
        message:'验证码格式不对'
    }
    ]"
  />
  <div style="margin: 16px;">
    <van-button
     round block
      type="info"
       native-type="submit"
       :disabled="isLogin"
       :loading="isLogin"
       loading-text="登录中..."
       >提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import {userLogin} from './user'
import {saveToken} from '@/utils/token.js'
export default {
name:'login',
data() {
    return {
        mobile:'18312345678',
        code:'246810',
        isLogin:false
        
    }
},
methods: {
    onSubmit(values){
        console.log(values);
        this.isLogin=true
        userLogin(values).then(res=>{
            console.log(res);
            this.$toast.success('登录成功');
            saveToken(res.data.data);
            this.$router.push({path:'/home'})
        }).catch(err=>{
          this.$toast.fail('登录失败');
        }).then(()=>{
          this.isLogin=false
        })
    }
},
}
</script>

<style lang="less">
.login-container{
    .van-nav-bar__content{
        background-color: #0098fa;
       .van-icon-arrow-left{
            color:#fff
        }
        .van-nav-bar__title{
            color: #fff;
        }
        .van-nav-bar__text{
            color:#fff
        }
    }
}
</style>